<template>
  <div class="settings">
    <div class="page-header">
      <h2>系统设置</h2>
    </div>

    <div class="settings-grid">
      <!-- 基本设置 -->
      <div class="card">
        <h3>基本设置</h3>
        <form @submit.prevent="saveBasicSettings">
          <div class="form-group">
            <label>网站名称</label>
            <input 
              type="text" 
              class="form-control" 
              v-model="basicSettings.siteName"
            />
          </div>
          <div class="form-group">
            <label>网站描述</label>
            <textarea 
              class="form-control" 
              v-model="basicSettings.description"
              rows="3"
            ></textarea>
          </div>
          <div class="form-group">
            <label>管理员邮箱</label>
            <input 
              type="email" 
              class="form-control" 
              v-model="basicSettings.adminEmail"
            />
          </div>
          <button type="submit" class="btn">保存基本设置</button>
        </form>
      </div>

      <!-- 安全设置 -->
      <div class="card">
        <h3>安全设置</h3>
        <form @submit.prevent="saveSecuritySettings">
          <div class="form-group">
            <label>
              <input 
                type="checkbox" 
                v-model="securitySettings.enableTwoFactor"
              />
              启用双因素认证
            </label>
          </div>
          <div class="form-group">
            <label>
              <input 
                type="checkbox" 
                v-model="securitySettings.requireStrongPassword"
              />
              要求强密码
            </label>
          </div>
          <div class="form-group">
            <label>会话超时时间（分钟）</label>
            <input 
              type="number" 
              class="form-control" 
              v-model="securitySettings.sessionTimeout"
              min="5"
              max="1440"
            />
          </div>
          <button type="submit" class="btn">保存安全设置</button>
        </form>
      </div>

      <!-- 通知设置 -->
      <div class="card">
        <h3>通知设置</h3>
        <form @submit.prevent="saveNotificationSettings">
          <div class="form-group">
            <label>
              <input 
                type="checkbox" 
                v-model="notificationSettings.emailNotifications"
              />
              启用邮件通知
            </label>
          </div>
          <div class="form-group">
            <label>
              <input 
                type="checkbox" 
                v-model="notificationSettings.smsNotifications"
              />
              启用短信通知
            </label>
          </div>
          <div class="form-group">
            <label>
              <input 
                type="checkbox" 
                v-model="notificationSettings.pushNotifications"
              />
              启用推送通知
            </label>
          </div>
          <button type="submit" class="btn">保存通知设置</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Settings',
  data() {
    return {
      basicSettings: {
        siteName: 'Vue管理后台',
        description: '一个现代化的Vue管理后台系统',
        adminEmail: 'admin@example.com'
      },
      securitySettings: {
        enableTwoFactor: true,
        requireStrongPassword: true,
        sessionTimeout: 30
      },
      notificationSettings: {
        emailNotifications: true,
        smsNotifications: false,
        pushNotifications: true
      }
    }
  },
  methods: {
    saveBasicSettings() {
      alert('基本设置已保存！')
    },
    saveSecuritySettings() {
      alert('安全设置已保存！')
    },
    saveNotificationSettings() {
      alert('通知设置已保存！')
    }
  }
}
</script>

<style scoped>
.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #2c3e50;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.card h3 {
  margin-bottom: 20px;
  color: #2c3e50;
  border-bottom: 1px solid #ecf0f1;
  padding-bottom: 10px;
}

.form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.form-group input[type="checkbox"] {
  width: auto;
  margin: 0;
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
}
</style> 